<template>
  <div>
    <h2>插入菜品</h2>
    <el-form @submit.prevent="insertDish" :model="form" ref="form" label-width="120px">
      <el-form-item label="菜品名称" prop="dish_name">
        <el-input v-model="form.dish_name" placeholder="请输入菜品名称" style="width: 360px" required></el-input>
      </el-form-item>
      <el-form-item label="菜系" prop="dish_cuisine">
        <el-select v-model="form.dish_cuisine" style="width: 360px" placeholder="请选择菜系">
          <el-option label="川菜" value="川菜"></el-option>
          <el-option label="湘菜" value="湘菜"></el-option>
          <el-option label="粤菜" value="粤菜"></el-option>
          <el-option label="鲁菜" value="鲁菜"></el-option>
          <el-option label="外国菜" value="外国菜"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="价格" prop="dish_price">
        <el-input v-model="form.dish_price" placeholder="请输入价格" style="width: 360px"  required></el-input>
      </el-form-item>
      <el-form-item label="口味" prop="dish_taste">
        <el-input v-model="form.dish_taste" placeholder="请输入口味" style="width: 360px" required></el-input>
      </el-form-item>
      <el-form-item label="类别" prop="dish_category">
        <el-select v-model="form.dish_category" style="width: 360px" placeholder="请选择类型">
          <el-option label="招牌" value="招牌"></el-option>
          <el-option label="热炒" value="热炒"></el-option>
          <el-option label="小吃" value="小吃"></el-option>
          <el-option label="酒水" value="酒水"></el-option>
          <el-option label="炖汤" value="炖汤"></el-option>
          <el-option label="凉拌" value="凉拌"></el-option>
          <el-option label="主食" value="主食"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推荐指数"  prop="dish_rating">
        <el-input v-model="form.dish_rating" placeholder="请输入推荐指数" style="width: 360px" required></el-input>
      </el-form-item>

      <el-form-item label="图片" :label-width="formLabelWidth" prop="dish_img">
        <el-upload
            class="dish_img-uploader"
            action="http://localhost:10030/common/upload?module=dish_img"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="form.dish_img" :src="form.dish_img" class="dish_img">
          <i v-else class="el-icon-plus dish_img-uploader-icon"></i>
        </el-upload>
        <span class="tip">仅支持png/jpg格式的图片</span>
      </el-form-item>



      <el-form-item>
        <el-button type="primary" @click="insertDish">插入菜品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        dish_name: '',
        dish_cuisine: '',
        dish_price: 0,
        dish_taste: '',
        dish_category: '',
        dish_rating: 0,
        dish_img:'',
      },
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.form.dish_img = `http://localhost:10030/common/download?name=${res.content}`
      //强制刷新一下
      this.$forceUpdate();
    },
    insertDish() {
      try {
        const response =  axios.post('http://localhost:10030/dishes/insert', this.form);
        console.log('Response:', response);
        alert("插入菜品成功");
        this.resetForm();
      } catch (error) {
        console.error('Error inserting dish:', error);
      }
    },
    resetForm() {
      this.$refs.form.resetFields(); //resetFields() is a method of el-form ref
      // set your form fields to null or empty object
      this.form = {};
    },


  },
};
</script>

<style>
.dish_img-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.dish_img-uploader .el-upload:hover {
  border-color: #409EFF;
}
.dish_img-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.dish_img {
  width: 178px;
  height: 178px;
  display: block;
}
.tip {
  display: block;
  margin-top: 10px;
  color: #999;
}
</style>